<template>
  <view class="container">
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="题库 " :background="background">
    </u-navbar>
    <view class="container_header_title" style="text-align: center;margin-top: 30rpx;">
      公共题库
    </view>
    <view class="container_header">

      <view class="container_header_tag row">
        <u-tag v-for="(item, index) in categoryType" :text="item.label"
          :type="index === tagIndex ? 'warning' : 'success'" @click="handleTagClick(index,item)" />
      </view>
    </view>

    <!--    <view class="container_search">
      <view class="container_search_text">
        试题名称:
      </view>
      <u-search shape="square" :clearabled="true" placeholder="请输入试题名称" :show-action="false"
        v-model="examName"></u-search>
    </view> -->

    <!--    <view class="container_choose">
      <view class="container_choose_text">
        排序方式
      </view>
      <view class="">
        <u-radio-group v-model="shareTime">
          <u-radio active-color="#82B2FF">按上传时间 </u-radio>
        </u-radio-group>
      </view>
      <view class="">
        <u-radio-group v-model="sharePerson">
          <u-radio size=10 active-color="#82B2FF">按刷题人次</u-radio>
        </u-radio-group>
      </view>
    </view> -->
    <view class="" style="text-align: center;">
      我的题库

    </view>

    <view class="container_card" v-if="personPaperList.length">
      <view v-for=" item in personPaperList">
        <view class="u-today">
          <view class="u-today-card">
            试题名称：{{item.name}}
          </view>
          <view class="">
            <u-tag size="mini" text="刷题" type="primary" @click="practiceHandle(item)" />
          </view>
        </view>
        <view class="u-today-header">
          <view class="u-today-text">
            题目数：{{item.questionCount}}
          </view>
          <view class="u-today-text">
            上传时间：{{item.createTime}}
          </view>

        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import store from '@/store/modules/user.js';
  import {
    getPublicPaperAPI,
    getPersonPaperListAPI
  } from '@/api/addPaper/addpaper.js'

  export default {
    data() {
      return {
        personPaperList: [],
        questionBankType: '',
        tagIndex: 0,
        handlePractice: false,
        shareTime: '',
        sharePerson: '',
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        examName: '',
        tagType: '竞赛学习',
        curLib: 'mh_secur_4',
        libs: ['mh_secur_4', 'mh_secur_5'],
        xxx: null
      };
    },
    created() {
      this.$store.dispatch('getCategoryType')
      this.getPersonPaperList()
    },
    computed: {
      categoryType() {
        return store.state.categoryType
      }
    },
    methods: {
      backIndex() {
        uni.navigateback();
      },
      async getPersonPaperList() {
        const param = {
          pageNo: 1,
          pageSize: 10
        }
        await getPersonPaperListAPI(param).then((res) => {
          this.personPaperList = res.data.list
        })
      },

      //点击个人刷题
      practiceHandle(item) {
        uni.navigateTo({
          url: '../shuatiPaper/shuatiPaper?paperType=person&id=' + item.id,
        })
      },
      // 点击分类公共题库
      handleTagClick(index, item) {
        this.tagIndex = index;
        this.tagType = item.label
        this.categoryId = item.value
        uni.navigateTo({
          url: '../shuatiPaper/shuatiPaper?paperType=public&categoryId=' + this.categoryId,
        })
      },
      getPublicExamList() {
        return new Promise((resolve, reject) => {
          const param = {
            categoryId: this.categoryId,
            questionBankType: this.questionBankType
          }
          getPublicPaperAPI(param).then((res) => {
            resolve(res.data)
            this.xxx = res.data
            if (res.data.progressRecordId) {
              this.progressRecordId = res.data.progressRecordId
              this.getProsess()
            } else {
              this.startReciteOr = true
              this.tag === 1
            }
          })
        })
      },
    }
  }
</script>

<style lang="scss">
  .container {
    margin: 0 10rpx;

    .container_header {
      margin-top: 10rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      background-color: aliceblue;
      border-radius: 20rpx;

      .container_header_title {
        text-align: center;
        margin-bottom: 20rpx;
      }

      .container_header_tag {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-evenly;
        align-items: center;
        text-align: center;

        .u-tag {
          width: 140rpx;
          margin: 5px;
          /* 根据需要调整间距 */
        }
      }

    }

    .container_search {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .container_search_text {
        margin-right: 20rpx;
      }
    }

    .container_choose {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .container_choose_text {
        margin-right: 20rpx;
      }
    }

    .container_card {
      margin-top: 20rpx;
      background-color: aliceblue;
      padding: 20rpx;
      border-radius: 20rpx;


      .u-today {
        display: flex;
        justify-content: space-between;
        padding: 0 25rpx;
        font-size: 24rpx;
        color: #333;

        .u-today-card {}


      }

      .u-today-header {
        display: flex;
        justify-content: flex-start;
        margin-top: 20rpx;

        .u-today-text {
          padding: 10rpx 25rpx;
          font-size: 18rpx;
          color: #333;
        }
      }

      .u-today-text {
        padding: 10rpx 25rpx;
        font-size: 18rpx;
        color: red;
      }

      .u-card {
        text-align: center;
      }
    }

    .container_popup_text {
      text-align: center;
      margin: 20rpx 0;
    }
  }
</style>